﻿<%@ Page Language="C#" StylesheetTheme="excite-bike" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
        .collapsepanel { float: left; margin: 5px; width: 200px; }
    </style>

    <script runat="server">
        protected void ShowModalChanged(object sender, EventArgs e)
        {
            DemoDialog.ShowModal = cbModal.Checked;
        }

        protected void DraggableChanged(object sender, EventArgs e)
        {
            DemoDialog.IsDraggable = cbDroppable.Checked;
        }

        protected void ResizeableChanged(object sender, EventArgs e)
        {
            DemoDialog.IsResizable = cbResizeable.Checked;
        }

        protected void AlignmentChanged(object sender, EventArgs e)
        {
            DemoDialog.Position = (DialogPositions)Enum.Parse(typeof(DialogPositions), AlignmentDropDown.SelectedValue);
        }

        protected void UpdateContent(object sender, EventArgs e)
        {
            DemoDialog.Title = TitleText.Text;
            DemoDialog.DialogIcon = (DialogIcons)Enum.Parse(typeof(DialogIcons), IconDropDown.SelectedValue);
            DemoDialog.MessageText = MessageText.Text;
        }
    
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <DotNetAge:Dialog ID="DemoDialog" runat="server" Title="Sample Dialog" IsDraggable="true"
        DialogIcon="Info" MessageText="Here is the sample dialog message" OnClientDragStart="$('#el').html('dragStart');"
        OnClientDrag="displayClientInfo(event,ui);" OnClientDragStop="displayClientInfo(event,ui);"
        OnClienClose="displayClientInfo(event,ui);" OnClientBeforeClose="displayClientInfo(event,ui);"
        OnClientOpen="displayClientInfo(event,ui);" OnClientFocus="displayClientInfo(event,ui);"
        OnClientResizeStop="displayClientInfo(event,ui);" OnClientResizeStart="displayClientInfo(event,ui);"
        OnClientResize="displayClientInfo(event,ui);">
        <BodyTemplate>
            <div style='margin: 10px'>
                <div style='vertical-align: middle; height: 64px; padding-left: 40px; background: transparent url(mvwres://DNA.UI.JQuery, Version=1.1.15.3782, Culture=neutral, PublicKeyToken=40f672d8570a48f9/DNA.UI.JQuery.Dialog.Info.gif) no-repeat;'>
                    Here is the sample dialog message</div>
            </div>
        </BodyTemplate>
        <Trigger TargetID="DialogButton" />
    </DotNetAge:Dialog>

    <script type="text/javascript">
        function displayClientInfo(event, ui) {
            $('#el').html(event.type);
            if (event.screenX)
                $('#pl').html('x:' + event.screenX + 'y:' + event.screenY);
        }
    </script>

    <br />
    <DotNetAge:SimpleButton ID="DialogButton" runat="server" Text="Open Dialog" />
    <br />
    <br />
    <DotNetAge:CollapsablePanel ID="CollapsablePanel1" runat="server" Title="Behavior Properties"
        CssClass="collapsepanel">
        <ContentTempalte>
            <div class="dna-demo-fields">
                <ul>
                    <li><span>ShowModal:</span><asp:CheckBox ID="cbModal" runat="server" Checked="false"
                        AutoPostBack="true" OnCheckedChanged="ShowModalChanged" /></li>
                    <li><span>IsDraggable:</span><asp:CheckBox ID="cbDroppable" runat="server" Checked="true"
                        AutoPostBack="true" OnCheckedChanged="DraggableChanged" /></li>
                    <li><span>IsResizeable:</span><asp:CheckBox ID="cbResizeable" runat="server" Checked="false"
                        AutoPostBack="true" OnCheckedChanged="ResizeableChanged" /></li>
                    <li><span>Position:</span><asp:DropDownList ID="AlignmentDropDown" runat="server"
                        AutoPostBack="true" Width="100" OnSelectedIndexChanged="AlignmentChanged">
                        <asp:ListItem Text="Center" Value="Center" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Left" Value="Left"></asp:ListItem>
                        <asp:ListItem Text="Top" Value="Top"></asp:ListItem>
                        <asp:ListItem Text="Right" Value="Right"></asp:ListItem>
                        <asp:ListItem Text="LeftTop" Value="LeftTop"></asp:ListItem>
                        <asp:ListItem Text="LeftBottom" Value="LeftBottom"></asp:ListItem>
                        <asp:ListItem Text="RightTop" Value="RightTop"></asp:ListItem>
                        <asp:ListItem Text="RightBottom" Value="RightBottom"></asp:ListItem>
                    </asp:DropDownList>
                    </li>
                </ul>
            </div>
        </ContentTempalte>
    </DotNetAge:CollapsablePanel>
    <DotNetAge:CollapsablePanel ID="CollapsablePanel3" runat="server" Title="Quick Content Properties"
        CssClass="collapsepanel">
        <ContentTempalte>
            <div class="dna-demo-fields">
                <ul>
                    <li><span>Title:</span><asp:TextBox ID="TitleText" runat="server" Width="150" Text="Sample Dialog"></asp:TextBox></li>
                    <li><span>MessageText:</span><asp:TextBox ID="MessageText" runat="server" Width="150"
                        Text="Here is the sample dialog message"></asp:TextBox></li>
                    <li><span>DialogIcon:</span><asp:DropDownList ID="IconDropDown" runat="server">
                        <asp:ListItem Text="Info" Value="Info" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Error" Value="Error"></asp:ListItem>
                        <asp:ListItem Text="Question" Value="Question"></asp:ListItem>
                        <asp:ListItem Text="Stop" Value="Stop"></asp:ListItem>
                    </asp:DropDownList>
                    </li>
                    <li>
                        <asp:Button ID="Button1" runat="server" Text="Update" OnClick="UpdateContent" /></li>
                </ul>
            </div>
        </ContentTempalte>
    </DotNetAge:CollapsablePanel>
    <DotNetAge:CollapsablePanel ID="CollapsablePanel2" runat="server" Title="ClientEvents"
        CssClass="collapsepanel">
        <ContentTempalte>
            <div class="dna-demo-fields">
                <ul>
                    <li><span>event:</span><label id="el"></label></li>
                    <li><span>position:</span><label id="pl"></label></li>
                </ul>
            </div>
        </ContentTempalte>
    </DotNetAge:CollapsablePanel>
    </form>
</body>
</html>
